Test your skills: Sizing

The aim of this skill test is to help you assess whether you understand the different ways of sizing items in CSS.

Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.

Sizing 1

In this task, you have two boxes.

To complete the task:

Size the first box so that the height will be at least 100px, even if there is less content that would cause it to grow to that height. The content should not overflow if it doesn't fit into the box.
To test this, remove the content from the HTML to make sure you still get a 100px tall box even with no content.
Size the second box so that it is fixed at 100px tall. In this case, the content should overflow.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="box box1">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
</div>

<div class="box box2">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
</div>

cssCopyPlay

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}

.box {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.box1 {
  /* Add styles here */
}

.box2 {
  /* Add styles here */
}

The updated styling should look like this:

Play

Click here to show the solution

There are two boxes. The first one should be given a min-height so it expands to hold the additional content, but will not shrink below 100px tall if the content is removed. The second box is given a fixed height, which will cause content to overflow.

Sizing 2

In this task, you have a box that contains another box.

To complete the task:

Make the inner box width 60% of the width of the outer box. The box-sizing property is set to border-box, which means that the total width includes any padding and border.
Give the inner box 10% padding on all sides.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="box">
  <div class="inner">Make me 60% of my parent's width.</div>
</div>

cssCopyPlay

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}

.box {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.inner {
  background-color: rebeccapurple;
  color: white;
  border-radius: 5px;
}

* {
  box-sizing: border-box;
}
.inner {
  /* Add styles here */
}

The updated styling should look like this:

Play

Click here to show the solution

Set the box width to 60%, and give it a padding value of 10%. All elements already have box-sizing: border-box set to save you from worrying about calculating the 60% width value:

Sizing 3

In this task, you have two images in boxes. One image is smaller than the box, while the other is larger, causing it to break out of the box.

To complete the task, imagine that the box is responsive and therefore could grow and shrink. Apply a declaration to the images so that the large image shrinks down into the box, but the small image does not stretch.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="box">
  <img
    alt="A pink star"
    src="https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png" />
</div>

<div class="box">
  <img
    alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>

cssCopyPlay

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}
.box {
  border: 5px solid black;
  margin-bottom: 1em;
  width: 500px;
}

img {
  /* Add styles here */
}

The updated styling should look like this:

Play

Click here to show the solution

Set the images' max-width property to 100% to contain the large image inside its box. If you use width: 100%, the small image will stretch.

Help improve MDN

Was this page helpful to you?

YesNo

Learn how to contribute

This page was last modified on Feb 3, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

Filter sidebar

Your blueprint for a better internet.

MDN

Contribute

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.